Add canvas zoom and Spacebar pan (SP-024) - #40

Summary

Implements StickPak Kanban SP-024: Figma-style canvas zoom and Spacebar+drag pan inside @jeffgo10/react-canvas-designer 1.2.0, with a docs /stickpak demo. Viewport is runtime UI only (not layout JSON).

Changes

Packages (@jeffgo10/*)

• Bump react-canvas-designer 1.1.1 → 1.2.0
• Add canvasViewport.ts (clamp zoom 1…4, pan clamp, zoom-toward-point, Stage transform compose)
• Stage scale = fit baseline × user zoom; pan via Stage x/y inside overflow-hidden shell
• Wheel zoom toward pointer; Space+drag pan with grab/grabbing cursor (skipped in form fields)
• Handle API: getViewport / setViewportZoom / zoomBy / resetViewport; onViewportChange prop
• Update stagePointerToDesign and pinch touchClientToDesign so SP-006 sticker pinch stays aligned when zoomed/panned

Docs app (apps/docs)

• /stickpak Zoom − / % / + / Reset view toolbar + help text

Docs / Cursor rules / agent tooling

• Update docs/stickpak/phase-1.md, engineering-notes.md, package README, ls-foundry-core.mdc pin

Commits

Test plan

• pnpm test --filter=@jeffgo10/react-canvas-designer
• pnpm run build:packages (or pnpm run build)
• pnpm run dev --filter=@ls-foundry/docs → /stickpak
  • Scroll wheel zooms toward cursor
  • Space + drag pans when zoomed; grab cursor while Space held
  • Marquee still works without Space; typing in inputs does not pan
  • Zoom − / + / Reset view buttons update % label

Notes / follow-ups

• Publish: bump already in package; after merge run pnpm run deploy / CI publish for @jeffgo10/react-canvas-designer@1.2.0
• Storefront: pin 1.2.0; reconcile with use-canvas-viewport (prefer designer camera or keep outer CSS viewport for mobile only)

Made with Cursor